<template>
    <div class="new-tag">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="iconfont icon-wenzhangliebiaoxiangqing"></i> 标签管理</el-breadcrumb-item>
                <el-breadcrumb-item>编辑标签</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form :rules="rules" :model="form" label-width="80px" ref="numberValidateForm">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入分类名称"></el-input>
                </el-form-item>
                <el-form-item label="是否可用" prop="enabled">
                    <el-radio-group v-model="form.enabled">
                        <el-radio  :label="1">是</el-radio>
                        <el-radio  :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="所属分类" prop="parent_id">
                    <el-select v-model="form.parent_id" placeholder="请选择所属分类标签">
                        <el-option label="一级分类标签" :value="0">一级分类标签</el-option>
                        <div v-if="form.parent_id!=0">
                            <el-option  v-for="item,index in first_tag" :key="index" :label="item.name" :value="item.id">{{item.name}}</el-option>
                        </div>
                    </el-select>
                </el-form-item>
                <el-form-item label="标签说明">
                    <el-input type="textarea" v-model="form.tag_description"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('numberValidateForm')">保存</el-button>
                    <el-button @click="resetForm('numberValidateForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "add-article-tag",
        props:{
          tag_id:{
              type:Number,
              default:0,
          }
        },
        data(){
            return {
                first_tag:[],
                form: {
                    name: '',
                    enabled: null,
                    desc: '',
                    parent_id:'',
                },
                rules:{
                    name:[
                        {required:true,message:'请输入分类名称',trigger:'blur'},
                    ],
                    enabled:[
                        {required:true,message:'请选择分类标签是否可用',trigger:'change'}
                    ],
                    parent_id:[
                        {required:true,message:'请选择所属标签',trigger:'change'}
                    ]
                }
            }
        },
        created(){
            this.get_level();
            this._init_tag();
        },
        methods:{
            _init_tag(){
                this.getAjax('admin/get_tag',{id:this.tag_id}).then(res=>{
                    console.log(res);
                    if(res.code==1){
                        let data = res.data;
                        this.form.name = data.name;
                        this.form.enabled = data.enabled;
                        this.form.parent_id = data.parent_id;
                        this.form.tag_description= data.tag_description;
                    }
                })
            },
            get_level(){
                let This = this;
                this.getAjax('admin/first_level').then(res=>{
                    This.first_tag =res.data;
                })
            },
            onSubmit(formName){
                let This  = this;
                this.$refs[formName].validate((valid,obj)=>{
                    if(valid){
                        this.postAjax('admin/edit_tag',{...This.form,id:this.tag_id}).then(res=>{
                            if(res.code){
                                this.$message.success(res.msg);
                                this.$emit('editSuccess')
                            }else{
                                this.$message.error(res.msg);
                            }
                        })
                    }else{
                        let test = Object.values(obj);
                        this.$message({
                            message: test[0][0].message,
                            type: 'warning'
                        });
                        return false;
                    }
                });
            },
            resetForm(formName){
                this.$refs[formName].resetFields();
            }
        },
        beforeCreate: function() {
            console.log("创建前")
        },
        beforeMount: function() {
            console.log("mount之前")
        },
        mounted: function() {
            console.log("mount之后")
        },
        beforeUpdate: function() {
            console.log("更新前");
        },
        updated: function() {
            console.log("更新完成");
        },
        beforeDestroy: function() {
            console.log("销毁前");
        },
        destroyed: function() {
            console.log("已销毁");
        },
    }
</script>

<style scoped>

</style>